<template>
  <view class="confirmCardPurchase">
    <!--主体内容-->
    <view class="confirmCardPurchase-content">
      <!--场馆信息-->
      <view class="mt-[20rpx] mb-[20rpx] pt-6 pb-6 pl-5 pr-5 bg-white">
        <view class="font-bold text-sm">场馆信息</view>
        <view class="flex items-center justify-between">
          <view>
            <view class="font-bold text-sm mt-1 line-clamp-2">攀岩馆（9:00-21:00）</view>
            <view class="text-gray-500 text-xs mt-1 line-clamp-2">中国车谷国际体育文化交流中心</view>
          </view>
          <view class="flex items-center justify-between">
            <view class="text-xs">
              <text class="material-icons text-amber-300 mr-3">location_on</text>
              <view>地图</view>
            </view>
            <view class="text-xs">
              <text class="material-icons text-emerald-500">call</text>
              <view>电话</view>
            </view>
          </view>
        </view>
      </view>

      <!--场馆信息-->
      <view class="mt-[20rpx] mb-[20rpx] pt-6 pb-6 pl-5 pr-5 bg-white">
        <view class="font-bold text-sm">青少年新人单次攀岩体验课</view>
        <view class="flex items-center justify-between">
          <view class="font-bold text-xs mt-2 text-gray-500">攀岩馆</view>
        </view>
        <view class="flex items-center justify-between">
          <view class="text-xs mt-1 line-clamp-2">2023年11月16号-2024年11月16号</view>
          <view>￥100</view>
        </view>
      </view>

      <!--会员卡使用规则-->
      <view class="mt-[20rpx] mb-[20rpx] pt-6 pb-6 pl-5 pr-5 bg-white">
        <view class="font-bold text-sm mb-3">会员卡使用规则</view>
        <view class="text-xs text-gray-500">固定时间排场，需提前2小时电话预约；</view>
        <view class="text-xs text-gray-500">体验券购买之日起15天内有效</view>
        <view class="text-xs text-gray-500">单张体验券使用时长2小时；</view>
        <view class="text-xs text-gray-500">体验券使用年龄为10-16岁。</view>
      </view>

      <!-- 支付-->
      <!--<MyCard :is-radius="false" class="mb-4 pt-20" padding="40rpx">-->
      <!--  <u-radio-group v-model="paymentNum" iconPlacement="right" placement="column">-->
      <!--    <view v-for="(item, index) in TYPE_OF_PAYMENT" :key="index" class="flex items-center">-->
      <!--      <u-image :src="item.image" height="30" width="30" />-->
      <!--      <u-radio-->
      <!--        :customStyle="{ padding: '10px', flex: 1 }"-->
      <!--        :label="item.name"-->
      <!--        :name="item.status"-->
      <!--        class="flex-1"-->
      <!--      />-->
      <!--    </view>-->
      <!--  </u-radio-group>-->
      <!--</MyCard>-->
    </view>

    <!--注释-->
    <!--<view class="pay-desk">-->
    <!--  <view>-->
    <!--    合计：-->
    <!--    <text class="text-red-500">￥100.00</text>-->
    <!--  </view>-->
    <!--  <u-button shape="circle" type="primary">确认支付</u-button>-->
    <!--</view>-->
  </view>
</template>

<script lang="ts" setup>
// 选择支付
// const paymentNum = ref(0);
</script>

<style lang="scss" scoped>
.confirmCardPurchase {
  height: 100vh;

  .confirmCardPurchase-content {
    height: calc(100% - 160rpx);
    overflow: auto;
    background-color: rgb(250, 250, 251);

    :deep(.cell-details) {
      .u-cell__body {
        align-items: flex-end;
      }
    }
  }

  .pay-desk {
    @apply h-20 font-bold bg-white flex items-center justify-between p-5 fixed bottom-0 left-0 w-full shadow-neutral-600 shadow-2xl;
  }
}
</style>
